<template>
    <Modal v-model="visible" draggable width="900" @on-visible-change="visibleChange">
        <p slot="header">
            <Icon type="logo-buffer" :size="22"/>
            <span style="margin-left: 0.5em">{{title}}</span>
        </p>
        <Row>
            <Col span="12">
                <Card dis-hover style="min-height: 500px">
                    <p slot="title">基本信息</p>
                    <Form ref="objectData" :disabled="!canEdit" :model="objectData.position" :rules="ruleValidate" label-colon autocomplete="off"  :label-width="100">
                      <FormItem label="岗位名称"  prop="positionName">
                          <Input v-model="objectData.position.positionName" clearable placeholder="请输入岗位名称"></Input>
                      </FormItem>
                      <FormItem label="岗位描述"  prop="description">
                          <Input v-model="objectData.position.description" clearable placeholder="请输入岗位描述"></Input>
                      </FormItem>
                      <Row>
                         <Col span="12">
                            <FormItem label="岗位排序"  prop="orders">
                               <InputNumber :max="100" :min="1" v-model="objectData.position.orders"></InputNumber>
                            </FormItem>
                         </Col>
                         <Col span="12">
                            <FormItem label="岗位状态"  prop="valid">
                                <i-switch v-model="objectData.position.valid" :true-value="1" :false-value="0" size="large">
                                    <span slot="open">正常</span>
                                    <span slot="close">关闭</span>
                                 </i-switch>
                            </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Card>
            </Col>
            <Col span="12">
                <Card dis-hover style="min-height: 500px">
                    <p slot="title">系统角色</p>
                    <Scroll height="400">
                    <Tree ref="roleTree" :data="roleData" show-checkbox></Tree>
                    </Scroll>
                </Card>
            </Col>
        </Row>
        <div slot="footer" v-show="canEdit">
            <Button @click="cancel">取消</Button>
            <Button type="primary" @click="handleSubmit('objectData')">保存</Button>
        </div>
    </Modal>
</template>

<script>
    import {getById,saveOrUpdate} from "@/api/positionApi"
    import {getRoleTree} from "@/api/roleApi"
    import PositionDataProvider from '@/views/group_management/data/PositionDataProvider'
    import {ruleValidate} from '@/views/group_management/position/validator/PositionRules'

    export default {
        name: "organization-detail",
        components:{

        },
        props:{
            positionId:{
                type: [Number,String],
                required: false
            },
            showModal: {
                type: Boolean,
                required: true
            },
            canEdit: {
                type: Boolean,
                required: true
            },
            reloadData: {
                type: Boolean,
                required: false,
                default: false
            },
            title: {
                type: String,
                required: true,
            }
        },
        data () {
            return {
                visible: this.showModal,
                objectData: PositionDataProvider.createPositionVo(),
                ruleValidate,
                roleData:[],
            }
        },
        mounted(){
            getRoleTree().then(res=>{
                this.roleData = res
            })
        },
        watch: {
            showModal (val) {
                this.visible = val
            },
            visible (val) {
                if (val) {
                    if (this.positionId){
                        getById(this.positionId).then(res=>{
                            this.objectData = res
                            if (this.roleData.length===0){
                                getRoleTree().then(res2=>{
                                    this.roleData = res2
                                    this.setSelectRoleItem()
                                })
                            }else {
                                this.restSelectRoleItem()
                                this.setSelectRoleItem()
                            }
                        })
                    }else{
                        this.objectData = PositionDataProvider.createPositionVo()
                        this.restSelectRoleItem()
                    }
                }
            }
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let selectItems = this.$refs.roleTree.getCheckedAndIndeterminateNodes()
                        this.objectData.roleIds = []
                        selectItems.forEach(item=>{
                            if (item.id){
                                this.objectData.roleIds.push({id:item.id})
                            }
                        })
                       let action = 'save';
                        if (this.objectData.id){
                          action= 'update'
                        }
                        saveOrUpdate(this.objectData,action).then(res=>{
                            this.$Message.success(res)
                            this.visible = false
                            this.$emit('callbackByOk')
                        })
                    }
                })
            },
            loadData(){

            },
            setSelectRoleItem(){
                this.roleData.forEach(role => {
                    if (this.objectData.roleIds.length>0){
                        this.objectData.roleIds.forEach(roleId => {
                            this.setCheckedOfRoleTree(role,roleId.id)
                        })
                    }else {
                        this.setCheckedOfRoleTree(role,'')
                    }

                })
            },
            setCheckedOfRoleTree(temp,roleId){
                let needFind = true;
                while (needFind){
                    if (this.canEdit){
                        if(temp.id){
                            temp.disabled = false
                        }
                    }else if(temp.id||temp.children){
                        temp.disabled = true
                    }
                    if (roleId===temp.id){
                        if (temp.children===null||temp.children===undefined){
                            temp.checked=true
                        }
                        needFind = false;
                    }else if (temp.children) {
                        temp.children.forEach(role=>{
                            this.setCheckedOfRoleTree(role,roleId);
                            needFind = false;
                        })
                    }else{
                        needFind = false;
                    }
                }
            },
            restSelectRoleItem(){
                this.roleData.forEach(role => {
                    this.restCheckedOfRoleTree(role)
                })
            },
            restCheckedOfRoleTree(temp){
                let needFind = true;
                while (needFind){
                    temp.checked = false
                    if (temp.id||temp.children){
                        temp.disabled = false
                    }
                    if (temp.children) {
                        temp.indeterminate = false
                        temp.children.forEach(role=>{
                            this.restCheckedOfRoleTree(role);
                            needFind = false;
                        })
                    }else{
                        needFind = false;
                    }
                }
            },
            cancel () {
                this.visible = false
            },
            visibleChange(val){
                if (!val){
                    this.$emit('callbackByCancel')
                }
            },

        }
    }
</script>

<style scoped>

</style>